<template>
	<div id="conten">
		<div class="ABox">
			<div class="title">
				<span class="ywColor">业务机（{{ ywjIp }}）
					<nodeStatus :nodeIp="ywjIp"></nodeStatus>
				</span>
				
				<span v-if="ywjVip">
					<img class="itemBtn" src="../../../showDataImg/ha.png" style="vertical-align:middle;margin-left: 6px;" v-if="securityMethod == 1" />
					<img class="itemBtn" src="../../../showDataImg/vip.png" style="vertical-align:middle;margin-left: 6px;" v-else />
				</span>
				


			</div>
			<div class="centDiv">
				<el-scrollbar style="height: 100%;" wrapStyle="overflow-x:hidden;" wrap-class="list" wrap-style="">
					<div v-show="noneData == true" style="margin-top:20px;text-align: center;">
						暂无数据...
					</div>
					<div v-for="(item, index) in ywjList" :key="index" class="vipBox">
						<div class="cenBOx ">
							<div class="leftBox">
								网卡名称：
							</div>
							<span>
								{{ item.importantDisplayName }}
							</span>
						</div>
						<div class="cenBOx ">
							<div class="leftBox">
								服务IP：
							</div>
							<ul class="vip" v-if="ywjVip">
								<li v-for="(vipitem, i) in item.vipList" :key="i">
									{{ vipitem }}
								</li>
							</ul>
							<ul class="vip" v-else>
								<li>
									--
								</li>
							</ul>
						</div>
						<div>
							<div class="leftBox">
								掩码：
							</div>
							<span>
								{{ item.subnetMasks }}
							</span>
						</div>

						<div class="cenBOx">
							<div class="leftBox">
								网关：
							</div>
							<span>
								{{ item.ipv4Gateway }}
							</span>
						</div>
						<div class="cenBOx">
							<div class="leftBox">
								DNS：
							</div>
							<span>
								{{ item.dnsServers }}
							</span>
						</div>
					</div>
				</el-scrollbar>
			</div>
			<div class="topBpx">
				<el-button size="mini" type="primary" :disabled="bzjVip" plain class="ml10" @click="groupSecurityServiceAddFn('ywj')">添加</el-button>
				<el-button size="mini" type="danger" plain class="ml10" @click="groupSecurityServiceDelFn('ywj')">卸载</el-button>
			</div>
		</div>
		<div class="BBox">
			<div class="title">
				<span class="bzColor">保障机（{{ bzjIp }}）
					<nodeStatus :nodeIp="bzjIp"></nodeStatus>
				</span>
				
				<span v-if="bzjVip">
					<img class="itemBtn" src="../../../showDataImg/ha.png" style="vertical-align:middle;margin-left: 6px;" v-if="securityMethod == 1" />
					<img class="itemBtn" src="../../../showDataImg/vip.png" style="vertical-align:middle;margin-left: 6px;" v-else />
				</span>
			</div>
			<div class="centDiv">
				<el-scrollbar style="height: 100%;" wrapStyle="overflow-x:hidden;" wrap-class="list" wrap-style="">
					<div v-show="noneData == true" style="margin-top:20px;text-align: center;">
						暂无数据...
					</div>
					<div v-for="(item, index) in bzjList" :key="index" class="vipBox">
						<div class="cenBOx ">
							<div class="leftBox">
								网卡名称：
							</div>
							<span>
								{{ item.guaranteeDisplayName }}
							</span>
						</div>
						<div class="cenBOx ">
							<div class="leftBox">
								服务IP：
							</div>
							<ul class="vip" v-if="bzjVip">
								<li v-for="(vipitem, i) in item.vipList" :key="i">
									{{ vipitem }}
								</li>
							</ul>
							<ul class="vip" v-else>
								<li>
									--
								</li>
							</ul>
						</div>
						<div>
							<div class="leftBox">
								掩码：
							</div>
							<span>
								{{ item.subnetMasks }}
							</span>
						</div>
						<div class="cenBOx">
							<div class="leftBox">
								网关：
							</div>
							<span>
								{{ item.ipv4Gateway }}
							</span>
						</div>
						<div class="cenBOx">
							<div class="leftBox">
								DNS：
							</div>
							<span>
								{{ item.dnsServers }}
							</span>
						</div>
					</div>
				</el-scrollbar>
			</div>
			<div class="topBpx">
				<el-button size="mini" type="primary" plain class="ml10" :disabled="ywjVip" @click="groupSecurityServiceAddFn('bzj')">添加</el-button>
				<el-button size="mini" type="danger" plain class="ml10" @click="groupSecurityServiceDelFn('bzj')">卸载</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		groupSecurityServiceInfo,
		groupSecurityServiceAdd,
		groupSecurityServiceDel,
		checkVip
	} from "@/api/console/senior";

	// 	/console/group/groupSecurityServiceInfo  获取保障组保障方式信息   参数：id
	// /console/group/groupSecurityServiceAdd  保障组保障方式 添加   参数：searchId （节点ID）
	// /console/group/groupSecurityServiceDel   卸载  参数：searchId （节点ID）
	//节点状态显示组件
	import nodeStatus from '@/views/components/simple/nodeStatus';

	export default {
		components: {
			nodeStatus,
		},
		data() {
			return {
				groupStatus: "", //
				noneData: false,
				securityMethod: "2", //1 代表ha模式  2 代表vip 模式
				ywjIp: "",
				bzjIp: "",
				ywjVip: false,
				bzjVip: false,
				importantNodeId: "",
				securityNodeId: "",
				ywjList: [],
				bzjList: [],
				groupId: "",
				item: ""
			};
		},
		mounted() {},
		methods: {
			// 获取保障组保障方式信息   参数：id
			groupSecurityServiceInfoFn(item) {
				var vue = this;
				this.item = item;

				this.noneData = false;
				this.importantNodeId = item.importantNodeId;
				this.securityNodeId = item.securityNodeId;
				this.groupStatus = item.groupStatus;
				this.ywjIp = item.importantNodeIp;
				this.bzjIp = item.securityNodeIp;




				//获取A vip信息
				checkVip({
					id: item.id,
					nodeId: item.importantNodeId
				}).then(response => {
					vue.ywjVip = response.data.vipState;

					vue.ywjList = [];

					response.data.viplist.map(item => {
						var ywjJson = {
							vipList: item.vip.split(","),
							dnsServers: item.dnsServers,
							ipv4Gateway: item.ipv4Gateway,
							subnetMasks: item.subnetMasks, //掩码
							importantDisplayName: item.importantDisplayName //网卡名称
						};
						vue.securityMethod = item.securityMethod;
						vue.ywjList.push(ywjJson);
					});
				})

				//获取B vip信息
				checkVip({
					id: item.id,
					nodeId: item.securityNodeId
				}).then(response => {
					vue.bzjVip = response.data.vipState;


					vue.bzjList = [];
					response.data.viplist.map(item => {
						var bzjJson = {
							vipList: item.vip.split(","),
							dnsServers: item.dnsServers,
							ipv4Gateway: item.ipv4Gateway,
							subnetMasks: item.subnetMasks, //掩码
							guaranteeDisplayName: item.guaranteeDisplayName //网卡名称
						};
						vue.securityMethod = item.securityMethod;
						vue.bzjList.push(bzjJson);
					})
				})

				if (this.checkVipTime) {
					clearTimeout(this.checkVipTime);
				}

				//5秒后循环查询vip
				this.checkVipTime = setTimeout(() => {
					this.groupSecurityServiceInfoFn(item);
				}, 5000);

			},
			groupSecurityServiceAddFn(type) {
				var formData = {};
				if (type == "ywj") {
					formData.searchId = this.importantNodeId;
				} else if (type == "bzj") {
					formData.searchId = this.securityNodeId;
				}

				this.msgSuccess("添加中...");
				groupSecurityServiceAdd(formData).then(response => {
					//后台处理 无需等待
				});
			},
			groupSecurityServiceDelFn(type) {
				var formData = {};
				if (type == "ywj") {
					formData.searchId = this.importantNodeId;
				} else if (type == "bzj") {
					formData.searchId = this.securityNodeId;
				}

				this.msgSuccess("卸载中...");

				groupSecurityServiceDel(formData).then(response => {

				});
			}
		}
	};
</script>

<style scoped="scoped">
	.vip {
		position: relative;
		left: 110px;
		top: -17px;
		margin: 0;
		padding: 0;
		width: 200px;
	}

	#conten {
		display: flex;
		justify-content: space-between;
	}

	#conten>div {
		width: 430px;
		height: 500px;
		border: 1px solid #e3e3e3;
		border-radius: 4px;
		padding: 10px;
	}

	.title {
		text-align: center;
		padding: 10px;
		font-size: 16px;
	}

	.ywColor {
		color: #67c23a;
	}

	.bzColor {
		color: #1890ff;
	}

	.ml10 {
		margin-left: 10px;
	}

	.cenBOx {
		margin-top: 16px;
	}

	.leftBox {
		font-weight: bold;
		display: inline-block;
		width: 110px;
		text-align: right;
	}

	.rightSpan {
		display: inline-block;
		width: 150px;
	}

	.centDiv {
		height: 320px;
		overflow: hidden;
	}

	.topBpx {
		/* float: right; */
		margin-top: 40px;
		margin-left: 32%;
	}

	.vipBox {
		width: 330px;
		border: 1px solid #cccccc;
		border-radius: 2px;
		padding-bottom: 10px;
		background: #fafafa;
		margin: 10px auto;
	}
</style>
